<template>
  <a-modal
    :title="isAdd?'新增':'编辑'"
    :visible="visible"
    @ok="onSubmit"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
  >
    <a-form-model ref="ruleForm" :model="form">
      <a-row type="flex" justify="space-around">
        <a-col :span="10">
          <a-form-model-item label="名称">
            <a-input @input="change" v-model="form.nameZh" />
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="名称key">
            <a-input :maxLength="50" @input="change" v-model="form.roleKey" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row type="flex" justify="space-around">
        <a-col :span="22">
          <a-form-model-item label="备注">
            <a-textarea @input="change" v-model="form.note" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
import { save, update } from "./api";
export default {
  data() {
    return {
      isAdd: false,
      visible: false,
      confirmLoading: false,
      form: {}
    };
  },
  methods: {
    change() {
      this.$forceUpdate();
    },
    onSubmit() {
      this.confirmLoading = true;
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          (this.isAdd ? save(this.form) : update(this.form))
            .then(v => {
              if (v.ok) {
                this.visible = false;
              } else {
                this.$message.error(v.msg || "操作失败");
              }
            })
            .finally(() => {
              this.confirmLoading = false;
              this.$parent.page();
            });
        } else {
          return false;
        }
      });
    },
    resetForm() {
      this.$refs["ruleForm"].resetFields();
    },
    showModal(record, isAdd) {
      this.visible = true;
      if (!isAdd) {
        this.form = record;
      } else {
        this.form = { isDisable: false };
        this.$nextTick(() => this.resetForm());
      }
      this.isAdd = isAdd;
    },
    handleCancel(e) {
      this.visible = false;
      this.confirmLoading = false;
    }
  }
};
</script>

<style>
</style>